<template>
  <div class="common-layout">
    <el-container style="height: 100%">
      <el-aside class="left_side">
        <draggable
          v-bind="{
            group: { name: 'people', pull: 'clone', put: false },
            sort: false,
            ghostClass: 'ghost',
          }"
          class="wrapper"
          :forceFallback="true"
          v-model="basicComponents"
          @end="handleMoveEnd"
          item-key="index"
        >
          <template #item="{ element }">
            <li class="item_box">
              <el-button style="border: 1px dashed" size="small">{{
                element.name
              }}</el-button>
            </li>
          </template>
        </draggable>
      </el-aside>
      <el-main class="main_side">
        <el-header class="main_side_head">
          <el-button type="primary" text @click="clear">清空</el-button>
        </el-header>
        <draggable
          class="main_box"
          :forceFallback="false"
          item-key="index"
          :list="previewList"
          animation="300"
          :scroll="true"
          @end="aftetEnd"
          ghost-class="ghost"
          dragClass="dragClass"
          group="vehicle-station"
        >
          <template #item="{ element, index }">
            <transition name="el-fade-in-linear">
              <div @click="handleField(element, index)" class="main_side_item">
                <component
                  :is="componentsList[element.type]"
                  :data="itemData"
                ></component>
              </div>
            </transition>
          </template>
        </draggable>
      </el-main>
      <el-aside class="right_side">
        <el-container>
          <el-header height="45px">
            <el-tabs v-model="activeName" class="demo-tabs">
              <el-tab-pane label="表单配置" name="first">
                <formConfig
                  :index="itemData_index"
                  :data="itemData"
                  @changeForm="changeForm"
                />
              </el-tab-pane>
              <el-tab-pane label="列表配置" name="second">Config</el-tab-pane>
            </el-tabs>
          </el-header>
        </el-container>
      </el-aside>
    </el-container>
  </div>
</template>
<script setup>
import { ref, watch, reactive, defineAsyncComponent } from "vue";
import { basicComponents } from "./config";
import formConfig from "./config/formConfig";
import draggable from "vuedraggable";
import getComponent from "@/views/modules/Online/design/components/index";
const componentsList = ref({});
const activeName = ref("first");
const previewList = ref([]);
const itemData = ref({});
let itemData_index = ref(0);

let widgetForm = reactive({
  list: [],
});
watch(
  previewList,
  (newValue) => {
    if (newValue && newValue.length > 0) {
      let obj = getComponent(previewList);
      for (let key in obj) {
        componentsList.value[key] = defineAsyncComponent(() =>
          import(`@/views/modules/Online/design/components/${obj[key]}`)
        );
      }
    }
  },
  { deep: true }
);

const handleMoveEnd = (e) => {
  console.log(e, "eeeeeee");
  let data = e.item._underlying_vm_;
  let d_ = {
    it_id: new Date().getTime() + "_" + Math.ceil(Math.random() * 99999),
    ...data,
  };
  previewList.value.push(d_);
  widgetForm.list.push(d_);
};
const handleField = (e, index) => {
  itemData.value = widgetForm.list[index];
  console.log(itemData.value, " itemData.value ");
  itemData_index.value = index;
};
const aftetEnd = (e) => {
  // console.log(e, "更换位置");
  let { newIndex, oldIndex } = e;
  console.log(newIndex, oldIndex, previewList.value, "更换位置");
  if (newIndex === oldIndex) return;
  widgetForm.list = previewList.value;
};
const clear = () => {
  previewList.value = [];
};
const changeForm = (data, id, index) => {
  console.log("修改组件", data, id, index);

  previewList.value[index].options=data
  widgetForm.list = previewList.value;
  // previewList.value.forEach(e => {
  //   if (e.it_id === id) {
  //     e.options=data
  //   }
  // })
  console.log(previewList.value, "previewList.value");
  console.log(widgetForm.list, "  widgetForm.list");
};
</script>
<style lang="scss" scoped>
.left_side {
  width: 18%;
  // background-color: pink;
  .item_box {
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
  }
}
.right_side {
  width: 15%;
  // background-color: greenyellow;
}
.main_side {
  background-color: darkgray;
  .main_side_head {
    line-height: 40px;
    height: 40px;
    background-color: #ccc;
  }
  .main_side_item:hover {
    border: 2px dashed rgb(56, 56, 221);
  }
}
</style>
